<template>
  <div>
    <h4><i class="el-icon-edit-outline"></i>  打印历史</h4>
    <template>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="时间"
          width="250">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="IP"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.ip }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="文件"
          width="250">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.file }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="打印参数"
          width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>纸张尺寸: {{ scope.row.parameter.size }}</p>
              <p>纸张类型: {{ scope.row.parameter.type }}</p>
              <p>双面打印: {{ scope.row.parameter.depulx }}</p>
              <p>纸张来源: {{ scope.row.parameter.tray }}</p>
              <p>纸张方向: {{ scope.row.parameter.direction }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.parameter.size }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import { getHistory, deleteHistory } from '../utils/api'

export default {
  name: 'History',
  data () {
    return {
      tableData: []
    }
  },
  methods: {
    async onLoad () {
      console.log('History : onLoad')
      this.tableData = []
      try {
        let response = await getHistory()
        console.log(response.status)
        if (response.status === 200) {
          console.log(response.data)
          while (response.data.length !== 0) {
            this.tableData.push(response.data.shift())
          }
          console.log(this.tableData)
        }
      } catch (error) {
        this.$message({
          type: 'error',
          message: '取得打印机设定参数失败 : ' + error
        })
      }
    },
    async handleDelete (index, row) {
      console.log(index)
      console.log(row)
      try {
        await deleteHistory(index)
        this.onLoad()
      } catch (error) {
        this.$message({
          type: 'error',
          message: '删除失败 : ' + error
        })
      }
    }
  },
  mounted () {
    console.log('mounted : History')
    this.onLoad()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
